<template>
  <HeaderComponent/>
  <div id="Catalog" class="Catalog">
    <h2>{{ item.itemId }}</h2>
    <form @submit.prevent="submitForm">
      <table>
        <tr>
          <td>ProductId:</td>
          <td>
            <input type="text" name="productId" id="productId" v-model="item.productId" />
          </td>
        </tr>
        <tr>
          <td>ItemId:</td>
          <td>
            <input type="text" name="itemId" id="itemId" v-model="item.itemId" />
          </td>
        </tr>
        <tr>
          <td>Quantity:</td>
          <td>
            <input type="text" name="quantity" id="quantity" v-model="item.quantity" />
          </td>
        </tr>
        <tr>
          <td>ListPrice:</td>
          <td>
            <input type="text" name="listPrice" id="listPrice" v-model="item.listPrice" />
          </td>
        </tr>
        <tr>
          <td>UnitCost:</td>
          <td>
            <input type="text" name="unitCost" id="unitCost" v-model="item.unitCost" />
          </td>
        </tr>
        <tr>
          <td>Description:</td>
          <td>
            <input type="text" name="attribute1" id="attribute1" v-model="item.attribute1" />
          </td>
        </tr>
      </table>
      <p align="center">
        <input name="editItem" type="submit" value="Save" />
      </p>
    </form>
  </div>
  <FooterComponent/>
</template>

<script>
import HeaderComponent from "@/views/common/header.vue";
import FooterComponent from "@/views/common/footer.vue";

export default {
  components: {FooterComponent, HeaderComponent},
  data() {
    return {
      item: {
        productId: '',
        itemId: '',
        quantity: '',
        listPrice: '',
        unitCost: '',
        attribute1: '',
      },
    };
  },
  mounted() {
    // Fetch item data and set it to the item object
    // This is just a placeholder, replace it with your own fetch method
    this.fetchItemData().then((itemData) => {
      this.item = itemData;
    });
  },
  methods: {
    submitForm() {
      // Perform the form submission action
      // Replace this with your own method
      // You can use fetch or axios to send a POST request to the server
      // this.fetchUpdateItem(this.item);
      console.log('Submit form:', this.item);
    },
    fetchItemData() {
      // Fetch item data from the server
      // Replace this with your own method
      // return fetch('/path/to/your/item/data')
      //   .then((response) => response.json())
      //   .catch((error) => console.error(error));
      // For demonstration purposes, we'll just return a dummy data
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({
            productId: '123',
            itemId: '456',
            quantity: '10',
            listPrice: '20',
            unitCost: '15',
            attribute1: 'Sample description',
          });
        }, 2000);
      });
    },
  },
};
</script>

<style scoped>
@import "@/assets/css/myAccount.css";
</style>